<template>
  <view class="detail-view">
    <view class="top-view">
      <view class="status-text">{{
        order_detail.auditStatus === 1
          ? "待审核"
          : order_detail.auditStatus === 2
          ? "已审核"
          : "已驳回"
      }}</view>
      <view class="desc" v-if="order_detail.auditStatus !== 1">
        {{ order_detail.auditName || "" }}在{{
          $u.timeFormat(order_detail.auditTime, "yyyy-mm-dd hh:MM:ss")
        }}进行{{ order_detail.auditStatus === 2 ? "审核" : "驳回" }}
      </view>
    </view>
    <view class="customer-view">
      <view class="title clearfix">
        <view class="float_left ellipsis">{{
          order_detail.customerName || ""
        }}</view>
      </view>
      <!-- 收货地址 -->
      <view class="delivery-view">
        <view class="name-top clearfix">
          <view class="float_left ellipsis">{{
            order_detail.realName || "--"
          }}</view>
          <view
            class="float_right mobile"
            @click="callPhone(order_detail.mobile)"
          >
            <text>{{ order_detail.mobile || "--" }}</text>
            <u-icon name="arrow-right" size="22"></u-icon>
          </view>
        </view>
        <view v-if="order_detail.area" class="address-view">
          {{ order_detail.area.provinceName }} {{ order_detail.area.cityName }}
          {{ order_detail.area.districtName }} {{ order_detail.address }}
        </view>
      </view>
      <view class="remark">备注：{{ order_detail.remark || "无" }}</view>
    </view>
    <view class="detail-cont">
      <view class="info-li clearfix">
        <view class="label">退货单号</view>
        <view class="value" @click="copy(order_detail.no)">
          <u-icon
            margin-right="20"
            label-pos="left"
            :label="order_detail.no || '--'"
            name="copy"
            custom-prefix="custom-icon"
            size="24"
          ></u-icon>
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label">源订单号</view>
        <view class="value" @click="copy(order_detail.originNo)">
          <u-icon
            margin-right="20"
            label-pos="left"
            :label="order_detail.originNo || '--'"
            name="copy"
            custom-prefix="custom-icon"
            size="24"
          ></u-icon>
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label">入库状态</view>
        <view class="value">
          <text
            :class="[
              parseInt(order_detail.inStatus) === 5
                ? 'success-status'
                : 'danger-status',
            ]"
          >
            {{ parseInt(order_detail.inStatus) === 4 ? "未入库" : "已入库" }}
          </text>
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label">所属店铺</view>
        <view class="value">{{ order_detail.shopName }}</view>
      </view>

      <view class="goods-title">商品清单</view>
      <view class="goods-ul">
        <view
          v-for="(item, index) in order_detail.details"
          :key="index"
          class="goods-li clearfix"
        >
          <view class="goods-img float_left"
            ><image :src="item.images[0]" mode="aspectFill"></image
          ></view>
          <view class="float_left info">
            <view class="goods-name ellipsis">{{ item.goodsName }}</view>
            <view class="goods-num clearfix">
              <view class="float_left"
                >{{ item.unitName }};{{ item.skuName }}</view
              >
              <text class="float_right"
                >销售量：{{ $utils.formatNub(item.saleNum)
                }}{{ item.unitName }}</text
              >
            </view>
            <view class="goods-num clearfix">
              <text class="float_left price">{{
                $utils.formattedNumber(item.returnUnitPrice)
              }}</text>
              <text class="float_right"
                >退货量：{{ $utils.formatNub(item.num)
                }}{{ item.unitName }}</text
              >
            </view>
          </view>
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label money-label">退货金额</view>
        <view class="value money-value">{{
          $utils.formattedNumber(totalMoney)
        }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">制单人</view>
        <view class="value">{{ order_detail.operatorName || "无" }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">制单时间</view>
        <view class="value">{{
          $u.timeFormat(order_detail.createTime, "yyyy-mm-dd hh:MM:ss")
        }}</view>
      </view>
    </view>
    <view
      class="btn-bottom-view clearfix"
      v-if="order_detail.auditStatus === 1"
    >
      <view
        v-if="$accessCheck($Access.ReturnWarehousingOrderDeleteOrderReturn)"
        class="left-btn"
        @click="openModel('确定要删除该退货单吗？', '删除')"
      >
        <u-icon
          label-pos="bottom"
          margin-top="10rpx"
          custom-prefix="custom-icon"
          name="quxiaodingdan"
          color="#B8C0C8"
          label="删除"
          label-color="#62738E"
          label-size="20"
          size="40"
        ></u-icon>
      </view>
      <view
        v-if="$accessCheck($Access.ReturnWarehousingOrderUpdateOrderReturn)"
        class="handel-btn"
        @click="openModel('确定要审核通过该退货单吗？', '审核')"
        >审核</view
      >
      <view
        v-if="$accessCheck($Access.ReturnWarehousingOrder_updateOrderReturn)"
        class="handel-btn info-btn"
        @click="goPage(`/pagesT/order/AddReturn?id=${order_id}`)"
      >
        编辑
      </view>
      <view
        v-if="$accessCheck($Access.ReturnWarehousingOrderUpdateOrderReturn)"
        class="handel-btn info-btn"
        @click="cancel_show = true"
        >驳回</view
      >
    </view>
    <u-popup v-model="cancel_show" mode="bottom">
      <view class="pop-ul">
        <view class="sku-name">请输入驳回退货单原因</view>
        <view class="pop-li">
          <textarea
            style="width: 100%"
            placeholder-class="input-pl"
            placeholder="请输入"
            v-model="cancelReason"
          />
        </view>
        <view class="btn" @click="rejectOrderReturn">确定</view>
      </view>
    </u-popup>
    <u-modal
      v-model="model_show"
      :show-cancel-button="true"
      :content="model_content"
      @confirm="modelConfirm"
      @cancel="modelCancel"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      model_tag: "",
      model_show: false,
      model_content: "",
      order_id: 0,
      order_detail: { details: [] },
      selfRuleData: {},
      updata_istrue: false,
      cancle_istrue: false,
      userCenterId: false,
      cancelReason: "",
      cancel_show: false,
    };
  },
  onPullDownRefresh() {
    this.getOrderOut();
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    totalMoney() {
      let num = 0;
      this.order_detail.details.forEach((item) => {
        num += Number(item.returnTotalPrice);
      });
      return num;
    },
  },
  onLoad(options) {
    this.order_id = options.id;
    this.getOrderOut();
  },
  methods: {
    // 详情
    getOrderOut() {
      this.$u.api
        .getOrderOut(this.order_id)
        .then((res) => {
          uni.stopPullDownRefresh();
          this.order_detail = res.data;
        })
        .catch((err) => {
          uni.stopPullDownRefresh();
        });
    },
    // 打开提示框
    openModel(content, tag) {
      this.model_content = content;
      this.model_show = true;
      this.model_tag = tag;
    },
    // 审核
    modelConfirm() {
      switch (this.model_tag) {
        case "审核":
          this.auditOrderOut();
          break;
        case "删除":
          this.deleteOrderOut();
          break;
      }
    },
    modelCancel() {},
    // 退货单驳回
    rejectOrderReturn() {
      this.$u.api
        .rejectOrderReturn({
          id: this.order_detail.id,
          auditFailReason: this.cancelReason,
        })
        .then((res) => {
          this.$u.toast("驳回成功");
          this.cancel_show = false;
          this.getOrderOut();
        });
    },
    // 退货单删除
    deleteOrderOut() {
      this.$u.api.deleteOrderOut(this.order_detail.id).then((res) => {
        this.$u.toast("删除成功");
        uni.navigateBack();
      });
    },
    // 审核订单
    auditOrderOut() {
      this.$u.api
        .auditOrderOut(this.order_detail.id, {
          auditName: this.userInfo.name || "",
        })
        .then((res) => {
          this.$u.toast("审核成功");
          this.getOrderOut();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-view {
  padding-bottom: 100rpx;
}
.top-view {
  background-color: $uni-color-primary;
  height: 200rpx;
  padding: 0 30rpx;
  color: #ffffff;
  font-size: 40rpx;
  .desc {
    font-size: 24rpx;
    padding-top: 10rpx;
  }
}
.customer-view {
  width: 710rpx;
  background-color: #ffffff;
  margin: 0 auto;
  border-radius: 20rpx;
  padding: 30rpx;
  transform: translateY(-80rpx);
  box-shadow: 0px 2px 12rpx 0px rgba(76, 80, 88, 0.16);
  .title {
    padding-bottom: 20rpx;
    .float_left {
      font-size: 32rpx;
      font-weight: bold;
      width: calc(100% - 120rpx);
    }
  }
  .delivery-view {
    font-size: 24rpx;
    color: #6c6c6c;
    .name-top {
      margin-bottom: 10rpx;
      .float_left {
        font-size: 28rpx;
        width: calc(100% - 180rpx);
      }
      .mobile {
        color: $uni-color-primary;
      }
    }
  }
  .remark {
    border-top: 1px solid #eeeeee;
    padding-top: 20rpx;
    line-height: 32rpx;
    margin-top: 20rpx;
  }
}
.detail-cont {
  width: 710rpx;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx 0;
  overflow: hidden;
  transform: translateY(-50rpx);
  .info-li {
    padding: 0 30rpx;
    line-height: 80rpx;
    .label {
      float: left;
      color: #6c6c6c;
    }
    .value {
      float: right;
    }
    .money-label {
      font-weight: bold;
    }
    .money-value {
      font-weight: bold;
      font-size: 30rpx;
    }
  }
  .b-b {
    border-bottom: 1px solid #eeeeee;
  }
  .goods-title {
    background-color: #fb5904;
    line-height: 72rpx;
    width: 644rpx;
    margin: 30rpx auto 0;
    color: #ffffff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    padding: 0 24rpx;
    position: relative;
    z-index: 1;
  }
  .goods-ul {
    padding: 0 30rpx 30rpx;
    box-shadow: 0px -3px 12rpx 0px #e4eaf5;
    border-bottom: 1px solid #eeeeee;
    .goods-li {
      padding-top: 24rpx;
      .goods-img {
        margin-right: 20rpx;
        image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 8rpx;
          display: block;
          border: 1px solid #eeeeee;
        }
      }
      .info {
        .goods-name {
          width: 470rpx;
          -webkit-line-clamp: 2;
          height: 68rpx;
          line-height: 34rpx;
        }
        .goods-num {
          padding-top: 10rpx;
          font-size: 24rpx;
          .float_left {
            &.price {
              font-size: 28rpx;
              font-weight: bold;
              color: $uni-color-error;
            }
          }
          .float_right {
          }
        }
      }
    }
  }
}
.btn-bottom-view {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 98rpx;
  background-color: #ffffff;
  padding: 0 38rpx;
  width: 100%;
  overflow: hidden;
  box-shadow: 0px -4rpx 32rpx 0px rgba(156, 170, 175, 0.16);
  .left-btn {
    margin-top: 10rpx;
    float: left;
  }
  .handel-btn {
    margin-left: 30rpx;
    margin-top: 20rpx;
    float: right;
    width: 164rpx;
    font-size: 26rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 32rpx;
    background-color: $uni-color-primary;
    border: 1rpx solid $uni-color-primary;
    color: #ffffff;
    &.info-btn {
      border: 1rpx solid #979797;
      background-color: transparent;
      color: #2d405e;
    }
  }
}
.pop-ul {
  line-height: 90rpx;
  .sku-name {
    font-weight: bold;
    padding: 0 24rpx;
  }

  .pop-li {
    padding: 24rpx;
    border-top: 1px solid #ecf0f7;
  }

  .btn {
    width: 100%;
    text-align: center;
    color: #ffffff;
    line-height: 90rpx;
    background-color: $uni-color-primary;
  }
  .title {
    text-align: center;
    font-size: 28rpx;
    line-height: 80rpx;
    border-bottom: 1px solid #ecf0f7;
  }
  .desc {
    font-size: 28rpx;
    line-height: 36rpx;
    padding-bottom: 10rpx;
    padding: 10rpx 20rpx 0;
  }
  .desc-tip {
    font-size: 24rpx;
    line-height: 36rpx;
    padding-bottom: 10rpx;
    padding: 10rpx 20rpx 0;
    color: #879bba;
  }
  .btn-view {
    text-align: center;
    padding: 20rpx 0;
  }
}
</style>
